/* eslint-disable no-nested-ternary */
import React from 'react';
import { Card, Col, Button, Divider } from 'antd';
// import uniqueid from 'lodash.uniqueid';
import { formatMessage } from 'umi';
import { eventTrack } from '@/utils/track';
import { get as _get } from 'object-path';
import { history } from 'umi';
import styles from '@/pages/Organization/OrgManage/OrgList.less';
// import Topology from '@/components/Topology';
import AuthComponent from '@/utils/auth/AuthComponent';
import AuthCode from '@/utils/auth/AuthCode';
import TopologyBox from '@/pages/Organization/Orgs/Topology/TopologyBox';

const CompanyProfile = props => {
    const { orgInfoDetail, route, fetchAllData } = props;
    const companyArr = _get(orgInfoDetail, 'company', []);
    const { authCode } = new AuthCode(props.route.code);
    const editStaff = async () => {
        const {
            orgInfoDetail: { organizationCode }
        } = props;
        //    埋点
        await eventTrack({
            eventName: 'organization_orgDetail_staff_click'
        });
        history.push({
            pathname: '/office/personnelManagement/organization/employeeList',
            query: {
                organizationCodes: organizationCode
            }
        });
    };
    return (
        <React.Fragment>
            <Card
                title={formatMessage({
                    id: 'label.orgDetail.basicInfo'
                })}
                bordered={false}
                headStyle={{
                    fontWeight: 600,
                    color: 'rgba(51, 51, 51, 1)',
                    fontSize: '16px'
                }}
                className={styles.cardTitle}
            >
                <div style={{ overflow: 'hidden' }}>
                    {orgInfoDetail.chairman && (
                        <Col span={8} style={{ marginBottom: 8 }}>
                            <span>{`${formatMessage({
                                id: 'label.orgDetail.chairman'
                            })}：`}</span>
                            <span>{_get(orgInfoDetail, 'chairman', '')}</span>
                        </Col>
                    )}
                    <Col span={8} style={{ marginBottom: 8 }}>
                        <span>{orgInfoDetail.blocFlag === 1 ? 'CEO：' : '区域CEO：'}</span>
                        <span>{_get(orgInfoDetail, 'companyManager', '')}</span>
                    </Col>
                    <Col span={8} style={{ marginBottom: 8 }}>
                        <span>{`${formatMessage({
                            id: 'label.orgDetail.employeeCount'
                        })}：`}</span>
                        <span>{_get(orgInfoDetail, 'employeeCount', '')}</span>
                        <span>/</span>
                        <span style={{ color: 'rgb(24, 144, 255)' }}>
                            {_get(orgInfoDetail, 'newEmployeeCount', '')}
                        </span>
                    </Col>
                    <Col span={8} style={{ marginBottom: 8 }}>
                        <span>
                            {`${formatMessage({
                                id: 'label.orgDetail.createTime'
                            })}：`}
                        </span>
                        <span>{_get(orgInfoDetail, 'regTime', '')}</span>
                    </Col>
                    <Col span={8} style={{ marginBottom: 8 }}>
                        <span>
                            {`${formatMessage({
                                id: 'label.orgDetail.business'
                            })}：`}
                        </span>
                        <span>{_get(orgInfoDetail, 'business', '')}</span>
                    </Col>
                    <Col span={8} style={{ marginBottom: 8 }}>
                        <span>{`${formatMessage({
                            id: 'label.orgDetail.departmentCount'
                        })}：`}</span>
                        <span>{_get(orgInfoDetail, 'departmentCount', '')}</span>
                    </Col>
                    <Col span={8} style={{ marginBottom: 8 }}>
                        <span>
                            {`${formatMessage({
                                id: 'label.orgDetail.companyId'
                            })}：`}
                        </span>
                        <span>{_get(orgInfoDetail, 'id', '')}</span>
                    </Col>
                    <Col span={8} style={{ marginBottom: 8 }}>
                        <span>{`${formatMessage({
                            id: 'label.orgDetail.companyArea'
                        })}：`}</span>
                        <span>
                            {_get(orgInfoDetail, 'companyArea', '')
                                .split(',')
                                .join('-')}
                        </span>
                    </Col>
                    <Col span={8} style={{ marginBottom: 8 }}>
                        <span>
                            {`${formatMessage({
                                id: 'label.orgDetail.roleCount'
                            })}：`}
                        </span>
                        <span>
                            <span>{_get(orgInfoDetail, 'roleCount', '')}</span>
                            <span>/</span>
                            <span>{_get(orgInfoDetail, 'postCount', '')}</span>
                        </span>
                    </Col>
                </div>
                <Divider style={{ marginTop: 16, marginBottom: 0 }} />
            </Card>
            <Card
                title={formatMessage({
                    id: 'label.orgDetail.orgShow'
                })}
                headStyle={{
                    fontWeight: 600,
                    color: 'rgba(51, 51, 51, 1)',
                    fontSize: '16px'
                }}
                className={styles.cardTitle}
                extra={
                    <AuthComponent code={authCode('detail:employee')}>
                        <Button type="primary" onClick={editStaff}>
                            {formatMessage({
                                id: 'btn.orgDetail.editStaff'
                            })}
                        </Button>
                    </AuthComponent>
                }
                bordered={false}
            >
                <TopologyBox
                    data={companyArr}
                    isGroup={orgInfoDetail.blocFlag === 1}
                    onDepartmentSave={fetchAllData}
                    onEmployeeSave={fetchAllData}
                    route={route}
                />
            </Card>
        </React.Fragment>
    );
};
export default CompanyProfile;
